<template>
  <div class="smart-campus-page">
    <div class="smart-campus-content">
      <!-- UE固定尺寸容器 -->
      <div class="ue-container">
        <iframe 
          :src="ueConfig.streamUrl" 
          class="ue-iframe"
          frameborder="0"
          allowfullscreen
        ></iframe>
        
        <!-- 顶部信息栏 -->
        <div class="top-info-bar">
          <div class="time-info">
            <div class="date-time">{{ currentDateTime }}</div>
            <div class="weekday">{{ currentWeekday }}</div>
          </div>
          <div class="title-section">
            <h1 class="main-title">智慧校园数据大屏</h1>
          </div>
          <div class="weather-info">
            <div class="weather-icon">☀️</div>
            <div class="weather-details">
              <div class="weather-text">晴 37℃</div>
              <div class="air-quality">PM: 40 µg/m³</div>
            </div>
          </div>
        </div>

        <!-- 顶部中间关键指标 -->
        <div class="top-metrics">
          <div class="metric-card">
            <div class="metric-icon">📍</div>
            <div class="metric-content">
              <div class="metric-label">区域面积</div>
              <div class="metric-value">2788.3 m²</div>
            </div>
          </div>
          <div class="metric-card">
            <div class="metric-icon">🏢</div>
            <div class="metric-content">
              <div class="metric-label">教学楼</div>
              <div class="metric-value">118 幢</div>
            </div>
          </div>
          <div class="metric-card">
            <div class="metric-icon">💻</div>
            <div class="metric-content">
              <div class="metric-label">设备总数</div>
              <div class="metric-value">1250 个</div>
            </div>
          </div>
    </div>

      <!-- 左侧面板 -->
      <div class="left-panel">
          <!-- 建筑用地规划 -->
          <div class="panel-section">
            <h3 class="section-title">建筑用地规划</h3>
            <div class="circular-chart-container">
              <div class="circular-chart">
                <div class="chart-center">
                  <div class="percentage">54%</div>
                  <div class="label">总建设用地占比</div>
                </div>
              </div>
              <div class="chart-info">
                <div class="info-item">
                  <div class="info-value">2788.3 m²</div>
                  <div class="info-label">建筑用地规模</div>
              </div>
                <div class="info-item">
                  <div class="info-value">2788.3 m²</div>
                  <div class="info-label">绿化用地规模</div>
              </div>
            </div>
          </div>
        </div>

          <!-- 学校出入信息 -->
          <div class="panel-section">
            <h3 class="section-title">学校出入信息</h3>
            <div class="line-chart">
              <div class="chart-legend">
                <div class="legend-item">
                  <div class="legend-color blue"></div>
                  <span>进校</span>
            </div>
                <div class="legend-item">
                  <div class="legend-color light-blue"></div>
                  <span>离校</span>
              </div>
            </div>
              <div class="chart-container">
                <canvas ref="entryExitChart" width="200" height="120"></canvas>
          </div>
        </div>
      </div>

          <!-- 学校事件督办 -->
          <div class="panel-section">
            <h3 class="section-title">学校事件督办</h3>
            <div class="event-list">
              <div class="event-item urgent">
                <div class="event-title">XXXXXXXXX</div>
                <div class="event-date">2025-08-20</div>
                <div class="event-status urgent">紧急未处理</div>
              </div>
              <div class="event-item" v-for="(event, index) in processedEvents" :key="index">
                <div class="event-title">{{ event.title }}</div>
                <div class="event-date">{{ event.date }}</div>
                <div class="event-status processed">已处理</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧面板 -->
      <div class="right-panel">
          <!-- 基础资源用量 -->
          <div class="panel-section">
            <h3 class="section-title">基础资源用量</h3>
            <div class="resource-grid">
              <div class="resource-item" v-for="(resource, index) in resourceData" :key="index">
                <div class="resource-icon">🏠</div>
                <div class="resource-value">{{ resource.value }}</div>
                <div class="resource-label">数据类型(个)</div>
            </div>
          </div>
        </div>

          <!-- 设备数量检修统计 -->
          <div class="panel-section">
            <h3 class="section-title">设备数量检修统计</h3>
            <div class="radar-chart">
              <canvas ref="deviceRadarChart" width="200" height="200"></canvas>
          </div>
        </div>

          <!-- 未处理事件督办 -->
          <div class="panel-section">
            <h3 class="section-title">未处理事件督办</h3>
            <div class="region-list">
              <div class="region-item" v-for="(region, index) in regionData" :key="index">
                <div class="region-label">{{ region.name }}</div>
                <div class="region-progress">
                  <div class="progress-bar">
                    <div class="progress-fill" :style="{ width: region.percentage + '%' }"></div>
                  </div>
                  <div class="region-count">{{ region.count }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed } from "vue";

// UE配置参数
const ueConfig = ref({
  // UE服务地址
  streamUrl: 'http://127.0.0.1:11194/video.html'
});

// 当前时间
const currentDateTime = ref('');
const currentWeekday = ref('');

// 已处理事件数据
const processedEvents = ref([
  { title: 'XXXXXXXXX', date: '2025-08-01' },
  { title: 'XXXXXXXXX', date: '2025-08-01' },
  { title: 'XXXXXXXXX', date: '2025-08-01' },
  { title: 'XXXXXXXXX', date: '2025-08-01' },
  { title: 'XXXXXXXXX', date: '2025-08-01' },
  { title: 'XXXXXXXXX', date: '2025-08-01' }
]);

// 基础资源数据
const resourceData = ref([
  { value: '2,888' },
  { value: '135' },
  { value: '1,776' },
  { value: '1,006' },
  { value: '545' },
  { value: '676' }
]);

// 区域数据
const regionData = ref([
  { name: '01 区域一', count: 65, percentage: 65 },
  { name: '02 区域二', count: 65, percentage: 65 },
  { name: '03 区域三', count: 56, percentage: 56 },
  { name: '04 区域四', count: 50, percentage: 50 },
  { name: '05 区域五', count: 42, percentage: 42 }
]);

// 图表引用
const entryExitChart = ref(null);
const deviceRadarChart = ref(null);

// 更新时间
const updateTime = () => {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, '0');
  const day = String(now.getDate()).padStart(2, '0');
  const hours = String(now.getHours()).padStart(2, '0');
  const minutes = String(now.getMinutes()).padStart(2, '0');
  
  currentDateTime.value = `${year} - ${month} - ${day} ${hours}:${minutes}`;
  
  const weekdays = ['星期日 (Sun.)', '星期一 (Mon.)', '星期二 (Tue.)', '星期三 (Wed.)', '星期四 (Thu.)', '星期五 (Fri.)', '星期六 (Sat.)'];
  currentWeekday.value = weekdays[now.getDay()];
};

// 绘制出入信息折线图
const drawEntryExitChart = () => {
  if (!entryExitChart.value) return;
  
  const canvas = entryExitChart.value;
  const ctx = canvas.getContext('2d');
  const width = canvas.width;
  const height = canvas.height;
  
  // 清空画布
  ctx.clearRect(0, 0, width, height);
  
  // 设置样式
  ctx.strokeStyle = '#00f2fe';
  ctx.lineWidth = 2;
  ctx.fillStyle = '#00f2fe';
  
  // 进校数据点
  const inData = [60, 75, 70, 65, 80, 85, 70, 75, 80, 70, 75, 60];
  // 离校数据点
  const outData = [40, 50, 45, 55, 50, 60, 45, 50, 55, 45, 50, 40];
  
  // 绘制进校线
  ctx.beginPath();
  ctx.strokeStyle = '#00f2fe';
  inData.forEach((value, index) => {
    const x = (index / (inData.length - 1)) * (width - 40) + 20;
    const y = height - 20 - (value / 100) * (height - 40);
    if (index === 0) {
      ctx.moveTo(x, y);
    } else {
      ctx.lineTo(x, y);
    }
  });
  ctx.stroke();
  
  // 绘制进校点
  inData.forEach((value, index) => {
    const x = (index / (inData.length - 1)) * (width - 40) + 20;
    const y = height - 20 - (value / 100) * (height - 40);
    ctx.beginPath();
    ctx.arc(x, y, 3, 0, 2 * Math.PI);
    ctx.fill();
  });
  
  // 绘制离校线
  ctx.beginPath();
  ctx.strokeStyle = '#4facfe';
  outData.forEach((value, index) => {
    const x = (index / (outData.length - 1)) * (width - 40) + 20;
    const y = height - 20 - (value / 100) * (height - 40);
    if (index === 0) {
      ctx.moveTo(x, y);
    } else {
      ctx.lineTo(x, y);
    }
  });
  ctx.stroke();
  
  // 绘制离校点
  ctx.fillStyle = '#4facfe';
  outData.forEach((value, index) => {
    const x = (index / (outData.length - 1)) * (width - 40) + 20;
    const y = height - 20 - (value / 100) * (height - 40);
    ctx.beginPath();
    ctx.arc(x, y, 3, 0, 2 * Math.PI);
    ctx.fill();
  });
};

// 绘制设备统计雷达图
const drawDeviceRadarChart = () => {
  if (!deviceRadarChart.value) return;
  
  const canvas = deviceRadarChart.value;
  const ctx = canvas.getContext('2d');
  const width = canvas.width;
  const height = canvas.height;
  const centerX = width / 2;
  const centerY = height / 2;
  const radius = 80;
  
  // 清空画布
  ctx.clearRect(0, 0, width, height);
  
  // 雷达图数据
  const data = {
    '在线': 80,
    '更换': 50,
    '修复': 70,
    '报修': 30,
    '离线': 20
  };
  
  const labels = Object.keys(data);
  const values = Object.values(data);
  const angleStep = (2 * Math.PI) / labels.length;
  
  // 绘制网格
  ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';
  ctx.lineWidth = 1;
  
  for (let i = 1; i <= 5; i++) {
    const r = (radius / 5) * i;
    ctx.beginPath();
    ctx.arc(centerX, centerY, r, 0, 2 * Math.PI);
    ctx.stroke();
  }
  
  // 绘制轴线
  labels.forEach((_, index) => {
    const angle = index * angleStep - Math.PI / 2;
    const x = centerX + Math.cos(angle) * radius;
    const y = centerY + Math.sin(angle) * radius;
    
    ctx.beginPath();
    ctx.moveTo(centerX, centerY);
    ctx.lineTo(x, y);
    ctx.stroke();
  });
  
  // 绘制数据区域
  ctx.fillStyle = 'rgba(0, 242, 254, 0.3)';
  ctx.strokeStyle = '#00f2fe';
  ctx.lineWidth = 2;
  
  ctx.beginPath();
  values.forEach((value, index) => {
    const angle = index * angleStep - Math.PI / 2;
    const r = (radius * value) / 100;
    const x = centerX + Math.cos(angle) * r;
    const y = centerY + Math.sin(angle) * r;
    
    if (index === 0) {
      ctx.moveTo(x, y);
    } else {
      ctx.lineTo(x, y);
    }
  });
  ctx.closePath();
  ctx.fill();
  ctx.stroke();
  
  // 绘制标签
  ctx.fillStyle = '#ffffff';
  ctx.font = '12px Microsoft YaHei';
  ctx.textAlign = 'center';
  
  labels.forEach((label, index) => {
    const angle = index * angleStep - Math.PI / 2;
    const x = centerX + Math.cos(angle) * (radius + 20);
    const y = centerY + Math.sin(angle) * (radius + 20);
    ctx.fillText(label, x, y);
  });
};

onMounted(() => {
  console.log('智慧校园页面已加载，UE数据流iframe已就绪');
  console.log('UE配置:', ueConfig.value);
  
  // 初始化时间
  updateTime();
  setInterval(updateTime, 1000);
  
  // 绘制图表
  setTimeout(() => {
    drawEntryExitChart();
    drawDeviceRadarChart();
  }, 100);
});

onUnmounted(() => {
  console.log('智慧校园页面已卸载');
});
</script>

<style scoped>
/* 重置所有可能的margin和padding */
.smart-campus-page * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.smart-campus-page {
  width: 100%;
  height: 100%;
  background: #001e3c;
  color: #ffffff;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  font-family: "Microsoft YaHei", sans-serif;
  overflow: hidden;
}

.smart-campus-content {
  width: 100%;
  height: 100%;
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ue-container {
  width: 100%;
  height: 100%;
  position: relative;
  margin: 0;
  padding: 0;
  max-width: 1920px;
  max-height: 1080px;
}

.ue-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  margin: 0;
  padding: 0;
  object-fit: fill;
  /* 强制覆盖iframe样式，消除黑边 */
  transform: scale(1.05);
  transform-origin: center center;
}

/* 顶部信息栏 */
.top-info-bar {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  height: 60px;
  background: rgba(0, 30, 60, 0.9);
  border: 1px solid rgba(0, 242, 254, 0.3);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 10;
  backdrop-filter: blur(10px);
}

.time-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.date-time {
  font-size: 16px;
  font-weight: 600;
  color: #00f2fe;
}

.weekday {
  font-size: 12px;
  color: #ffffff;
  margin-top: 2px;
}

.title-section {
  flex: 1;
  text-align: center;
}

.main-title {
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.weather-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.weather-icon {
  font-size: 24px;
}

.weather-details {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.weather-text {
  font-size: 14px;
  font-weight: 600;
  color: #00f2fe;
}

.air-quality {
  font-size: 12px;
  color: #ffffff;
  margin-top: 2px;
}

/* 顶部中间关键指标 */
.top-metrics {
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 20px;
  z-index: 10;
}

.metric-card {
  background: rgba(0, 30, 60, 0.9);
  border: 1px solid rgba(0, 242, 254, 0.3);
  border-radius: 8px;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  backdrop-filter: blur(10px);
  min-width: 150px;
}

.metric-icon {
  font-size: 24px;
}

.metric-content {
  display: flex;
  flex-direction: column;
}

.metric-label {
  font-size: 12px;
  color: #ffffff;
  margin-bottom: 4px;
}

.metric-value {
  font-size: 16px;
  font-weight: 700;
  color: #00f2fe;
}

/* 左侧面板 */
.left-panel {
  position: absolute;
  top: 180px;
  left: 20px;
  width: 300px;
  height: calc(100% - 200px);
  background: rgba(0, 30, 60, 0.9);
  border: 1px solid rgba(0, 242, 254, 0.3);
  border-radius: 8px;
  padding: 20px;
  z-index: 10;
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
}

/* 右侧面板 */
.right-panel {
  position: absolute;
  top: 180px;
  right: 20px;
  width: 300px;
  height: calc(100% - 200px);
  background: rgba(0, 30, 60, 0.9);
  border: 1px solid rgba(0, 242, 254, 0.3);
  border-radius: 8px;
  padding: 20px;
  z-index: 10;
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
}

.panel-section {
  background: rgba(0, 50, 100, 0.3);
  border: 1px solid rgba(0, 242, 254, 0.2);
  border-radius: 6px;
  padding: 15px;
  flex: 1;
  min-height: 200px;
}

.section-title {
  font-size: 14px;
  font-weight: 600;
  color: #00f2fe;
  margin-bottom: 15px;
  border-bottom: 1px solid rgba(0, 242, 254, 0.3);
  padding-bottom: 8px;
}

/* 建筑用地规划 - 圆形图表 */
.circular-chart-container {
  display: flex;
  align-items: center;
  gap: 20px;
}

.circular-chart {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: conic-gradient(#00f2fe 0deg 194deg, rgba(255, 255, 255, 0.2) 194deg 360deg);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.circular-chart::before {
  content: '';
  position: absolute;
  width: 70px;
  height: 70px;
  background: rgba(0, 30, 60, 0.9);
  border-radius: 50%;
}

.chart-center {
  position: relative;
  z-index: 1;
  text-align: center;
}

.percentage {
  color: #00f2fe;
  font-size: 20px;
  font-weight: bold;
}

.label {
  color: #ffffff;
  font-size: 10px;
  margin-top: 2px;
}

.chart-info {
  flex: 1;
}

.info-item {
  margin-bottom: 10px;
}

.info-value {
  color: #00f2fe;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 4px;
}

.info-label {
  color: #ffffff;
  font-size: 12px;
}

/* 学校出入信息 - 折线图 */
.line-chart {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.chart-legend {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 10px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #ffffff;
}

.legend-color {
  width: 12px;
  height: 3px;
  border-radius: 2px;
}

.legend-color.blue {
  background: #00f2fe;
}

.legend-color.light-blue {
  background: #4facfe;
}

.chart-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 学校事件督办 */
.event-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
}

.event-item {
  background: rgba(0, 50, 100, 0.2);
  border: 1px solid rgba(0, 242, 254, 0.2);
  border-radius: 4px;
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.event-item.urgent {
  border-color: #ff6b6b;
  background: rgba(255, 107, 107, 0.1);
}

.event-title {
  font-size: 12px;
  color: #ffffff;
  flex: 1;
}

.event-date {
  font-size: 10px;
  color: #00f2fe;
  margin: 0 8px;
}

.event-status {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
}

.event-status.processed {
  background: rgba(0, 242, 254, 0.2);
  color: #00f2fe;
}

.event-status.urgent {
  background: rgba(255, 107, 107, 0.2);
  color: #ff6b6b;
}

/* 基础资源用量 */
.resource-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.resource-item {
  background: rgba(0, 50, 100, 0.2);
  border: 1px solid rgba(0, 242, 254, 0.2);
  border-radius: 6px;
  padding: 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.resource-icon {
  font-size: 20px;
}

.resource-value {
  font-size: 16px;
  font-weight: bold;
  color: #00f2fe;
}

.resource-label {
  font-size: 10px;
  color: #ffffff;
}

/* 设备数量检修统计 - 雷达图 */
.radar-chart {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
}

/* 未处理事件督办 */
.region-list {
  display: flex;
    flex-direction: column;
  gap: 12px;
}

.region-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.region-label {
  font-size: 12px;
  color: #ffffff;
  width: 60px;
  flex-shrink: 0;
}

.region-progress {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.progress-bar {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #00f2fe, #4facfe);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.region-count {
  font-size: 12px;
  color: #00f2fe;
  font-weight: bold;
  width: 30px;
  text-align: right;
}

/* 响应式设计 */
@media (max-width: 1920px) or (max-height: 1080px) {
  .ue-container {
    aspect-ratio: 16/9;
    width: 100%;
    height: 100%;
    max-height: 100%;
  }
}
</style>